<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/css/templatemo_style.css" /><!-- 页面整体布局样式定义 -->
	<link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" /><!-- 菜单样式定义 -->
	<link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen" /><!-- 焦点图样式定义 -->
	
	<script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.nivo.slider.pack.js"></script> <!-- 焦点图JS脚本定义 -->
	<script type="text/javascript">
	function showUserName(){
		var name = "${user.username}";
		if(name != ""){
			//将登录位置显示用户名
			$("#login").html(name);
			//将注销由隐藏到显示
			$("#exitP").show();
			$("#login").attr("href","${ctx}/UserServlet?flag=info&userId=${user.userId}");
		}else{
			$("#exitP").hidden();
		}
	}
	</script>
</head>
<body>
	<div id="templatemo_body_wrapper">
		<div id="templatemo_wrapper">
			  <!-- header -->
			  <div id="templatemo_header">
					<div id="site_title"><h1><a href="#">穿美在线鞋城</a></h1></div>
						<div id="header_right">
							<p><a href="javascript:void(0);" id="login" target="_blank" >登陆</a>&nbsp;
							   <span id="exitP" style="display: none"><a href="${ctx}/UserServlet?flag=logout" id="exit" target="_blank">注销</a></span>
							</p>
						</div>
					<div class="cleaner"></div>
			  </div><!-- END of templatemo_header -->


			  <!-- menu -->
			  <div id="templatemo_menubar">
			  		<div id="top_nav" class="ddsmoothmenu">
						<ul>
							<li><a href="${ctx}/pro?flag=index" >首页</a></li>
							<li><a href="${ctx}/pro?flag=product" >产品</a></li>
							<li><a href="${ctx}/ShoppingCartServlet" class="selected">我的购物车</a></li>
							<li><a href="${ctx}/OrderServlet?flag=qoi">我的订单</a></li>
						</ul>
						<br style="clear: left" />
					</div> <!-- end of ddsmoothmenu -->
			  </div><!-- END of templatemo_menubar -->

			   <div id="templatemo_main">
					<!-- 侧边栏 -->
					<div id="sidebar" class="float_l">
						<!-- sidebar 1 -->
						<div class="sidebar_box"><span class="bottom"></span>
							<h3>品牌</h3>
							<c:forEach items="${brand}" var="bra">
								<div class="content">
									<ul class="sidebar_list">
										<li><a href="pro?flag=brand&&category_id=${bra.category_id}"><c:out value="${bra.name}"/></a></li>
									</ul>
								</div>
							</c:forEach>
						</div>
						<!-- sidebar 2 -->
						<div class="sidebar_box"><span class="bottom"></span>
							<h3>热卖单品 </h3>
							<c:forEach items="${hot}" var="hot">
							<div class="content">
								<div class="bs_box">
									<a
										href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}"><img
										src="${ctx}/${hot.imgpath}" alt="image"
										style="width: 96px; height: 96px" /></a>
									<h4>
										<br /> <a
											href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}">${hot.feature}</a>
									</h4>
									<br />
									<p class="price">${hot.price}.00￥</p>
									<div class="cleaner"></div>
								</div>
							</div>
							</c:forEach>
						</div>
					</div><!-- END of sidebar -->

					<!-- 内容展示区 -->
					<div id="content" class="float_r">
						<table width="650" cellspacing="0">
							<tr style="background-color: #a79d9d; color: black;">
								<td>图片</td>
								<td>商品描述</td>
								<td>数量</td>
								<td>价格</td>
								<td>小计</td>
								<td>操作</td>
							</tr>
							<c:forEach items="${cartsList}" var="cart">
								<tr>
									<td><img alt="image" src="${cart.imgpath}" 
									style="width:70px;height:70px"></td>
									<td>${cart.description }</td>
									<td>
										<input type="text" id="${cart.shoppingCartId}"
										 value="${cart.quantity}" style="width: 25px;" 
										 class="update_cart"> 
									</td>
									<td>￥${cart.price}</td>
									<td>￥${cart.total}</td>
									<td>
										<a href="${ctx}/ShoppingCartServlet?flag=delete&shopCartId=${cart.getShoppingCartId()}">
											<img alt="image" src="images/remove_x.gif"><br>&nbsp;移除
										</a>
									</td>
								</tr>
							</c:forEach>
						</table>
						<!--功能区开始-->
						<div style="padding-left: 300px; padding-top: 50px;">
							如果你已经修改该类商品，请单击<a id="update">更新</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span style="background-color: #f0f0f0; color: black; 
							width: 100px; heigh: 30px;"> &nbsp;&nbsp;&nbsp;合计 
							&nbsp;&nbsp;&nbsp;￥
							 <span> 
								<c:out value="${total}"></c:out>
							</span> &nbsp;&nbsp;&nbsp;
							</span><br><br>
							<div style="padding-left: 240px;">
								<a href="${ctx}/ShoppingCartServlet?flag=clear">结算</a>
								<div>
									<a href="${ctx}/pro?flag=index">继续购物</a>
								</div>
							</div>
						</div>
						<!--功能区结束-->
					</div>
				<div class="cleaner"></div>
			  </div><!-- END of templatemo_main -->

			  <!-- footer -->
			  <div id="templatemo_footer">
					<p>
						<a href="${ctx}/pro?flag=index">首页</a> | <a
						href="${ctx}/pro?flag=product">产品</a> | <a
						href="${ctx}/ShoppingCartServlet">我的购物车</a> | <a
						href="${ctx}/OrderServlet?flag=qoi">我的订单</a>
					</p>
					版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
			  </div><!-- END of templatemo_footer -->
		</div><!-- END of templatemo_wrapper -->
	</div><!-- END of templatemo_body_wrapper -->
<script type="text/javascript">
	$(function(){
		showUserName();
		//点击更新 
		$('#update').click(function(){
			var sb="";
			$("input").each(function(i){
				var shopcartId = this.id;
				var quantity = this.value;
				sb+=shopcartId+"="+quantity+"@";
			});
			$.ajax({
				type:"POST",
				url:"ShoppingCartServlet",
				data:{"flag":"update","stringbuffer":sb},
				dataType:"text",
				success:function(data){
					//更新成功后更新当前购物车页面
					location.href="${ctx}/ShoppingCartServlet";
				},
				error:function(e){
					alert("失败");
				}
			}); 
 		});
	});
</script>

</body>
</html>


